/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/15
 */

import React from 'react';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { MemberList } from '../components';
import { Action, BatchAction, CreateFormModal, UpdateFormModal } from './components';
import { routerRedux } from 'dva/router';
import { Page, OperationBoard } from 'components';
import { connect } from 'dva';

@connect(({ loading, member, jobs, departments, roles }) => ({ loading, member, jobs, departments, roles }))
class Member extends React.Component {
  static propTypes = {
    roles: PropTypes.object,
    departments: PropTypes.object,
    jobs: PropTypes.object,
    member: PropTypes.object,
    location: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  };

  state = {
    createFormModalVisible: false,
    updateFormModalVisible: false,
    updateFormDataSource: {},
  }

  _toggleCreateFormModal = () => {
    this.setState({
      createFormModalVisible: !this.state.createFormModalVisible,
    });
  }

  _toggleUpdateFormModal = () => {
    this.setState({
      updateFormModalVisible: !this.state.updateFormModalVisible,
    });
  }

  _handleCreateUser = (values) => {
    console.log(values);
  }

  _handleCancelCreateForm = () => {
    this.setState({
      createFormModalVisible: false,
    });
  }

  _handleUpdateUser = (values) => {
    
  }

  _handleCancelUpdateForm = () => {
    this.setState({
      updateFormModalVisible: false,
    });
  }

  _generateListProps = () => {
    const { location, loading, dispatch, member: { list, pagination } } = this.props;
    location.query = queryString.parse(location.search);
    const listProps = {
      dataSource: list,
      loading: loading.effects['member/loadMembers'],
      pagination,

      onChange (_pagination) {
        const { query, pathname } = location;
        dispatch(routerRedux.push({
          pathname,
          query: {
            ...query,
            current: _pagination.current,
            pageSize: _pagination.pageSize,
          },
        }));
      },

      onEditOneRecord: (record) => {
        // 打开编辑框
        // dispatch({
        //   type: 'member/openEditModal',
        //   payload: {
        //     modalType: 'update',
        //     id: record.id,
        //   },
        // });
        // this._toggleUpdateFormModal();
        console.log(record);
        const recordData = {
          name: `${record.UserInfo.Profile.FirstName}${record.UserInfo.Profile.LastName}`,
          mobile: record.UserInfo.Mobile,
          email: record.UserInfo.Email,
          job: record.JobID,
          department: record.DepartmentID,
          roles: (record.UserRoles || []).map(el => el.ID),
        };

        this.setState({
          updateFormDataSource: recordData,
        });

        this._toggleUpdateFormModal();
      },

      onDeleteOneRecord (id, record) {
        console.log('dispatch to delete');
      },

    };
    // listProps.onEditOneRecord.bind(this);
    return listProps;
  }

  render () {
    // const { } } = this.props;
    
    const listProps = this._generateListProps();


    return (
      <Page inner>
        <OperationBoard
          // filter={<span>Hello</span>}
          batchAction={<BatchAction />}
        >
          <Action onCreateClick={this._toggleCreateFormModal} />
        </OperationBoard>
        
        <MemberList {...listProps} />

        {/* 新增用户的表单Modal */}
        <CreateFormModal
          departments={this.props.departments.list}
          jobs={this.props.jobs.list}
          roles={this.props.roles.list}
          visible={this.state.createFormModalVisible}
          onOk={this._handleCreateUser}
          onCancel={this._handleCancelCreateForm}
        />

        <UpdateFormModal
          dataSource={this.state.updateFormDataSource} 
          departments={this.props.departments.list}
          jobs={this.props.jobs.list}
          roles={this.props.roles.list}
          visible={this.state.updateFormModalVisible}
          onOk={this._handleUpdateUser}
          onCancel={this._handleCancelUpdateForm}
        />
        
      </Page>
    );
  }
}

export default Member;
// export default connect(({ loading, member }) => ({ loading, member }))(Member);
